<template>
   <div>
        <ul class="nUl" v-show="flag" >
        <!-- <li v-for="(ele,index) in arr" :key="index" >{{ele}}</li> -->
                <li><router-link to="/">首页</router-link></li>
                <li><router-link to="/prolist">产品</router-link></li>
                <li @click="fn" ><router-link to="/proDt">产品动态</router-link></li>
                <li><router-link to="/compStr">公司实力</router-link> </li>
                <li><router-link to="/contact">联系</router-link></li>
               
        </ul>
   
   </div>
            
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      flag: true
    };
  },
  methods: {
    fn() { console.log(this.$router.history.current.path )
      if (this.$router.history.current.path == "/proDt"||
          this.$router.history.current.path == "/proDt/compNotice"
      ) {
      
       this.flag = !this.flag;
      }
    }
  },
  mounted() {
    var self = this;
    //点击浏览器返回监听事件
    window.addEventListener(
      "popstate",
      function(e) {
       // console.log(window.location.pathname);
        if (window.location.pathname == "/proDt"||
        window.location.pathname == "/proDt/compNotice"||
        window.location.pathname == "/proDt/indNews"
        ) {
          this.flag = !this.flag;
        } else {
          console.log("触发了");
          self.flag = true;
          console.log(self);
        }
        // console.log("我监听到了浏览器的返回按钮事件啦"); //根据自己的需求实现自己的功能
      },
      false
    );

    if (this.$router.history.current.path == "/proDt") {
      this.flag = !this.flag;
    }
  }
};
</script>
<style>
nav {
  background: #fff;
}
.nUl {
  display: flex;
  height: 1rem;
  line-height: 1rem;
  padding: 0 0.2rem;
}
.nUl li {
  width: 1.7rem;
  color: #555;
  font-size: 0.3rem;
}
.nUl li:nth-child(1) {
  width: 1rem;
}
.nUl li:nth-child(2) {
  width: 1rem;
}
</style>


